
import '../seckill/MiaoSha.css'
import React from 'react'
import { inject, observer } from 'mobx-react'
import { Button, Table, Select } from 'antd'

const { Option } = Select;

function handleChange(value) {
    console.log(`selected ${value}`);
}


@inject('newKaQuan')
@observer
class KaQuanGuanLi extends React.Component {
    state = {
        selectedRowKeys: [], // Check here to configure the default column
    };

    chuShiHua(){
        this.props.newKaQuan.insertTabData()
        
        
    }

    componentWillMount(){
        this.chuShiHua()
    }

   

    render() {
        const { selectedRowKeys } = this.state;

        let { tabData } = this.props.newKaQuan
        let pagination = {
            defaultPageSize: 4,
        }

        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            selections: [
                Table.SELECTION_ALL,
                Table.SELECTION_INVERT,
                {
                    key: 'odd',
                    text: 'Select Odd Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return false;
                            }
                            return true;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
                {
                    key: 'even',
                    text: 'Select Even Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return true;
                            }
                            return false;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
            ],
        };

        let columns = [
            {
                title: 'ID',
                dataIndex: 'ID',
                key: 'ID',
            },
            {
                title: '卡券名称',
                dataIndex: 'cvmCc',
                key: 'cvmCc',
            },
            {
                title: '卡号',
                dataIndex: 'money',
                key: 'money',
            },
            {
                title: '线下',
                dataIndex: 'moneyXiaXian',
                key: 'moneyXiaXian',
            },
            {
                title: 'faFangNum',
                dataIndex: 'faFangNum',
                key: 'faFangNum',
                render: (text) =>
                    <>
                        <Button type="primary">**激活</Button>
                        <Button type="primary">查看</Button>
                        <Button type="primary">修改</Button>
                        <Button type="primary" danger>删除</Button>
                    </>
            }
        ]
        return (
            <div className="miaoSha">
                
                <h1>卡券管理</h1>
                <div className="kaQuanContent">
                    <div className="lookUp">
                        <div>
                            <span>
                                卡券名称：
                                <input type="text" />
                            </span>
                        </div>

                        <div>
                            <span>
                                卡号：
                                <input type="text" />
                            </span>
                        </div>

                        <div>
                            <span>
                                批次：
                                <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                                    <Option value="jack">Jack</Option>
                                    <Option value="lucy">Lucy</Option>
                                    <Option value="Yiminghe">yiminghe</Option>
                                </Select>
                            </span>
                        </div>

                        <div>
                            <span>
                                状态：
                                <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                                    <Option value="jack">Jack</Option>
                                    <Option value="lucy">Lucy</Option>
                                    <Option value="Yiminghe">yiminghe</Option>
                                </Select>
                            </span>
                        </div>

                        <div>
                            <span>
                                是否使用：
                                <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                                    <Option value="jack">Jack</Option>
                                    <Option value="lucy">Lucy</Option>
                                    <Option value="Yiminghe">yiminghe</Option>
                                </Select>
                            </span>
                        </div>
                        <div>
                            <Button type="primary"> 确定</Button>
                        </div>
                    </div>
                    <Table dataSource={tabData} rowSelection={rowSelection} pagination={pagination} columns={columns} />
                    <Button type="primary">激活</Button>
                    <Button type="primary">取消激活</Button>
                    <Button type="primary">修改</Button>

                </div>
            </div>
        )
    }
}


export default KaQuanGuanLi
